import "./css/index.css";
import { Game, Point } from "./ts/game";

let map: [number, number, number][] = [
    //   [4, 7, 2],
    //   [6, 0, 5],
    //   [8, 1, 3],
    [1, 2, 3],
    [4, 5, 6],
    [7, 0, 8],
];

let game = new Game(map);

game.addListenSuccess(() => {
    alert("Success");
    console.log("Success")
});


render_map(map, game);

function render_map(map: [number, number, number][], g: Game) {
    // 初始地图渲染
    const container = document.getElementById("map_container") as HTMLElement;
    container.innerHTML = " ";
    for (let i = 0; i < map.length; i++) {
        for (let j = 0; j < map[i].length; j++) {
            const element = map[i][j];
            let item = `<div class="item" position="${[i, j]}">
            <span>${element === 0 ? "" : element}</span>
       </div>`;
            container.insertAdjacentHTML("beforeend", item);
            // game.is_complete()
        }
    }
    container?.querySelectorAll(".item").forEach((value: Node, _key: number, _parent: NodeListOf<Node>) => {

        value.addEventListener("click", (c) => {

            const position = ((c.target as HTMLElement).getAttribute('position') as string).split(',')
            const point = new Point(Number(position[0]), Number(position[1]))
            g.click(point)
            render_map(game.map, game);

        })
    })

}

